<template>
	<div class="app-container">
		<h2>4.2.2&nbsp;电气及自动化</h2>
		<el-card v-for="(item,index) in items" :key="item.id" class="evaluation-item" shadow="hover">
			<div slot="header" class="clearfix">
				<span class="number">{{ item.id }}.&nbsp;{{ item.title }}</span>
				<div class="options">
					<evaluationStd :_aspect="item.title" :_evaluatioon_index="item.evaluation_index" class="evaluation" />

					<lock :_locked="score[index].locked" :-pop-over-show="false" class="lock" @click.native="handleLock(index)" />
				</div>
			</div>
			<el-card class="children-question" shadow="never">
				<div slot="header" class="children-header">
					<div>{{ item.aspect }}.（{{ item.max_score }}分）</div>
				</div>
				<el-form ref="form" :model="item" label-width="100px">
					<el-form-item v-if="item.id!=2&&item.id!=4" label="是否满足">
						<el-radio-group v-model="score[index].satisfy">
						  <el-radio
						    :label="true"
						    :disabled="score[index].locked"
						    @change="addScore(index, true)"
						  >是</el-radio>
						  <el-radio
						    :label="false"
						    :disabled="score[index].locked"
						    @change="addScore(index,false)"
						  >否</el-radio>
						</el-radio-group>

					</el-form-item>
					<el-form-item v-else-if="item.id==2" >
						<el-radio-group v-model="score[index].score">
							<el-radio :label="4" :disabled="score[index].locked">主要房间满足要求</el-radio>
							<el-radio :label="8" :disabled="score[index].locked">所有区域均满足要求</el-radio>
						</el-radio-group>
						<!-- <el-input v-model="item.de" label="能耗降低幅度" /> -->
					</el-form-item>

					<el-form-item v-else-if="item.id==4" >
						<el-checkbox-group v-model="score[index].checkboxlist">
							<el-checkbox :label="0" :disabled="score[index].locked">三相配电变压器满足现行国家标准《三相配电变压器能效限定值及能效等级》GB20052的节能评价值要求</el-checkbox>
							<el-checkbox :label="1" :disabled="score[index].locked">水泵、风机等设备，及其他电气装置满足相关现行国家标准的节能评价值要求</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item v-if="!score[index].satisfy&&item.id!==4&&item.id!==2" label="不满足简述">
						<el-input v-model="score[index].description" label="不满足简述" type="textarea" />
					</el-form-item>
				</el-form>
			</el-card>
			<!-- <div class="socre">
        <div class="score-title">得分&nbsp;&nbsp;</div>
        <div class="sum-score">{{item.score}}&nbsp;分</div>
      </div>-->
		</el-card>
		<div id="choose">
			<router-link to="/usage/evaluate/aircondition">
			  <el-button type="primary" icon="el-icon-arrow-left">上一项</el-button>
			</router-link>

			<router-link to="/usage/evaluate/drainage">
			  <el-button type="primary" style="margin-left:20px">
			    下一项
			    <i class="el-icon-arrow-right el-icon--right"></i>
			  </el-button>
			</router-link>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import Lock from "@/components/Lock";
	import EvaluationStd from "@/components/EvaluationStd";

	export default {
		name: "Automation",
		components: {
			Lock,
			EvaluationStd
		},
		data() {
			return {
				items: [{
				  id: 1,
				  title: "",
				  aspect:
					"走廊、楼梯间、门厅、大堂、大空间、地下停车场等场所的照明系统采取分区、定时、感应等节能控制措施",
				  max_score: 3,
				  evaluation_index: "",
				},
				{
				  id: 2,
				  title: "",
				  aspect:
					"照明功率密度值达到现行国家标准《建筑照明设计标准》GB50034中规定的目标值",
				  max_score: 4,
				  evaluation_index: "",
				},
				{
				  id: 3,
				  title: "",
				  aspect:
					"合理选用电梯和自动扶梯，并采取电梯群控、扶梯自动启停等节能控制措施",
				  max_score: 2,
				  evaluation_index: "",
				},
				{
				  id: 4,
				  title: "",
				  aspect: "合理选用节能型电气设备，按照下列规则累计得分",
				  max_score: 3,
				  evaluation_index: "",
				}],
				score: []
			}
		},
		computed: {
			...mapGetters({
				usageScore: "usage",
				eId: "eId"
			})
		},
		created() {
			console.log("usageScore",this.usageScore)
			this.$store.dispatch("project/getHistory", this.eId);
			this.score = this.usageScore._4_2_2;
			if (this.score.length === 0) {
				console.log("我等于-0")
				this.score = [{
								satisfy: null,
								description: '',
								locked: false,
								score: 0
							  }, {
								satisfy: null,
								description: '',
								locked: false,
								score: 0
							  }, {
								satisfy: null,
								description: '',
								locked: false,
								score: 0
							  }, {
								satisfy: null,
								description: '',
								locked: false,
								score: 0,
								checkboxlist:[]
							  }]
			}
		},
		beforeDestroy() {
			let score_list = [1,2]
      console.log("================")
      console.log(this.score[3])
      console.log("================")
      this.score[3].score = 0
			this.score[3].checkboxlist.forEach((value)=>{
				this.score[3].score += score_list[value]
			})
      console.log("================")
      console.log(this.score[3])
      console.log("================")
			this.$store.dispatch("project/updateScore", {
				score: this.score,
				phase: "usage",
				aspect: "_4_2_2"
			});
		},
		methods: {
			// 计算分数的时候，第一项可能要先获取项目资料

			handleLock(index) {
				this.score[index].locked = !this.score[index].locked;
			},
			addScore(index, whether) {
				if (whether) {
					this.score[index].score = this.items[index].max_score;
				} else {
					this.score[index].score = 0;
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.app-container {
		h2 {
			text-align: center;
		}

		#choose {
			text-align: center;
			margin: 20px auto;
		}

		.evaluation-item {
			width: 60%;
			margin: 10px auto;

			>>>.el-card__header {
				padding: 10px 20px;
			}

			.clearfix:before,
			.clearfix:after {
				display: table;
				content: "";
			}

			.clearfix:after {
				clear: both;
			}

			.clearfix {
				overflow: hidden;
				position: relative;

				.number {
					font-weight: bold;
					position: absolute;
					bottom: 0;
				}

				.options {
					float: right;
					bottom: 0;

					.lock,
					.evaluation {
						display: inline-block;
					}
				}
			}

			.children-question {
				width: 100%;
				border: none;

				>>>.el-card__header {
					border-bottom: 0px;
					padding: 0px 20px;
				}

				>>>.el-card__body {
					padding: 10px 20px;
				}
			}
		}
	}
</style>
